 {% extends "../inc/base.html" %}
 {% block content %}

 <header class="mui-bar mui-bar-nav">
     <!--<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>-->
     <span class="mui-icon iconfont icon-cart"><span class="mui-badge">9</span></span>
     <h1 class="mui-title"><img src="/static/webapp/img/logo.png" ></h1>
     <span class="mui-icon iconfont icon-search mui-pull-right"></span>
 </header>
 <nav class="mui-bar mui-bar-tab">
     <a class="mui-tab-item mui-action-back" >
         <span class="mui-icon iconfont icon-back"></span>
         <span class="mui-tab-label">返回</span>
     </a>
     <a class="mui-tab-item" href="#SOHUCS">
         <span class="mui-icon iconfont icon-comment"><span class="mui-badge" id="changyan_count_unit">0</span></span>
         <span class="mui-tab-label">评论</span>
     </a>
     <a class="mui-tab-item" href="#shoucang">
         <span class="mui-icon iconfont icon-favor"></span>
         <span class="mui-tab-label">收藏</span>
     </a>
     <a class="mui-tab-item" href="#fenxiang">
         <span class="mui-icon iconfont icon-share"></span>
         <span class="mui-tab-label">分享</span>
     </a>

     {% if controller.is_login %}
     <a class="mui-tab-item" href="/user/index">
         <span class="mui-icon iconfont icon-my"></span>
         <span class="mui-tab-label">我的</span>
     </a>
     {%else%}
     <a class="mui-tab-item" href="/user/login">
         <span class="mui-icon iconfont icon-myfill"></span>
         <span class="mui-tab-label">登录</span>
     </a>
     {%endif%}

     <a class="mui-tab-item" href="#top">
         <span class="mui-icon iconfont icon-top"></span>
         <span class="mui-tab-label">顶部</span>
     </a>

 </nav>
 <div class="mui-content detail" style="background-color: #fff">
     <div class="mui-content-padded">
     <!-- 文章标题 -->
     <h1 class="title">{{info.title}}</h1>
         <div class="article-header">

             <div class="pgc-bar-top mui-clearfix" >
                 <a href="#" ga_category="toutiaohao" ga_label="" ga_event="click" class="avatar-link vwo-media-profile">
                     <div class="avatar">
                         <img src="/uc/index/avatar/uid/{{info.uid}}" class="avatar">
                     </div>
                 </a>
                 <div class="subtitle">
                     <p class="name"><a href="#" class="screen-name vwo-media-profile">
                         <span id="mediaName" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">{{info.uid|get_nickname}}</span>
                         <img src="/static/webapp/img/logo.png">
                     </a></p>
                     <a href="#" class="time vwo-media-profile" >

                         <span class="original original-fix">原创</span>

                         <span>{{ info.update_time|dateformat('Y-m-d H:i') }}</span>
                     </a>
                 </div>

             </div>

             <div class="favor-wrapper">
                 <button type="button" class="mui-btn mui-btn-primary mui-btn-outlined">关注</button>
             </div>
         </div>

         <article class="article-content">
             {%for val in info.content%}

                 {{val|safe}}

             {%endfor%}
         </article>
         </div>
     <div id="SOHUCS" sid="{{info.id}}"></div>

 </div>
 {% endblock%}

 {% block script %}

 <script id="changyan_mobile_js" charset="utf-8" type="text/javascript"
         src="//changyan.sohu.com/upload/mobile/wap-js/changyan_mobile.js?client_id={{controller.setup.CY_APPID}}&conf={{controller.setup.CY_APPKEY}}">
 </script>
 <script type="text/javascript" src="//assets.changyan.sohu.com/upload/plugins/plugins.count.js"></script>
 <script type="text/javascript">
     mui.init()
     var btn = document.querySelectorAll(".mui-bar-tab a.mui-tab-item");
     for(var i = 0;i<btn.length;i++){
         btn[i].addEventListener("tap",function () {
             var href = this.getAttribute("href");
             if(href=="#top"){
                 mui.scrollTo(0,500);
             }else if(href=="#shoucang"){
                 //todo
                 mui.toast("功能开发中。。。")
                 return
             }else if(href=="#fenxiang"){
                 //todo
                 mui.toast("功能开发中。。。")
                 return
             }else {
                 mui.openWindow({url: href})
             }

         })
     }

 </script>
 {% endblock %}